<style>
    .IndexSite{
        width: 100%;
    }
</style>
<!--顶部导航-->
<div class="IndexHeader">
    <div class="IndexSite">{$ip_city.name}</div>
    <div class="IndexTitle">芝麻街</div>
    <div class="IndexSearch"><a href="{:url('shop/search')}"><img src="/map/images/search.png" alt="搜索"/></a></div>
</div>

<div class="CommonMain">
    <!--banner-->
    <div class="banner">
        <div class="am-slider am-slider-default">
            <ul class="am-slides">
                {volist name="banner" id="vo"}
                <li><img src="{$vo.image}" /></li>
                {/volist}
            </ul>
        </div>
    </div>


    <!--店铺推荐-->
    <div class="dm-di4">
        <div class="title">店铺推荐</div>
        <div class="CollectList">
            {volist name="shops" id="vo"}
            <div class="Collect am-cf">
                <a href="{:url('shop/index',array('id'=>$vo['id']))}">
                    <div class="img am-fl">
                        <img src="{$vo.shop_image}" alt="">
                    </div>
                    <div class="text am-fl">
                        <p class="p1">{$vo.name}</p>
                        <p class="p2 xingNum" data-index="{$vo.average ?? 0}">
                            <img src="/map/images/xing.png" alt="">
                            <img src="/map/images/xing.png" alt="">
                            <img src="/map/images/xing.png" alt="">
                            <img src="/map/images/xing.png" alt="">
                            <img src="/map/images/xing.png" alt="">
                        </p>
                        <p class="p3">
                            {volist name="vo['tags']" id="tags_vo"}
                            <span>{$tags_vo.tagname}</span>
                            {/volist}
                        </p>
                        <p class="p4">{$vo.length}km</p>
                        <!--<p class="p5">买一送一</p>-->
                    </div>
                </a>
            </div>
            {/volist}

        </div>
    </div>
</div>
<style>
    @media screen and (max-width: 641px) {
        .p1{font-size: 0.24rem !important;}
    }
    .p1{width:90%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
</style>

<script>

    //banner
    $('.banner .am-slider').flexslider({
        pauseOnAction: false,            // Boolean: 用户操作时停止自动播放
        slideshowSpeed: 3000,           // Integer: ms 滚动间隔时间
        controlNav: false,               // Boolean: 是否创建控制点
        directionNav: false             // Boolean: 是否创建上/下一个按钮（previous/next）
    });

    //计算 suanUl 宽度
    suanUl()
    function suanUl(){
        let liNum = $('.suanUl li').length
        let widthUl = liNum * 3.4
        $('.suanUl').css('width', widthUl+'rem')
    }

    $('.xingNum').each(function(){
        let that = $(this)
        let index = that.attr('data-index')
        let img = that.find('img')
        let xing='/map/images/xing.png'
        let xing_x='/map/images/xing_x.png'
        img.each(function(i){
            if(i<index){
                $(this).attr('src',xing_x)
            }else{
                $(this).attr('src',xing)
            }
        })
    })


</script>
